<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div id="app">
             <!--1.插值表达式 mastache-->
             {{msg}}----{{author}}
             <br>
             <!--2.下标访问数组-->
             {{[1,2,3,4,5][3]}}
            <br>
             <!--3.访问json对象的属性-->
             {{book.name+"---"+book.author}}
            <br>
             <!--4.通过方法访问  调用methods属性中定义的函数 -->
             {{showMsg()}}
            <br>
              <!--5.通过计算属性展示  调用computed属性中定义的函数  不需要小括号 -->
              {{totalPrice}}
         </div>
     <!--    {{msg}}-->
         <script src="js/vue.js"></script>
         <script type="text/javascript">
             //ES5  ES6
             //1,创建vue对象
             const app = new Vue({
                 el:"#app",// 绑定的dom的id   代表vue实例中的数据只在该dom中有效
                 data:{//定义一些数据   项目中：异步请求服务端，服务端获取
                     msg:"hello,world!",
                     author:'Ellie',
                     book:{name:'vue入门',author:'Ellie'},
                     price:293829
                 },
                 methods:{//函数  方法
                     showMsg:function(){
                         return this.msg;//返回vue实例中msg的值
                     }
                 },
                 computed:{
                     // totalPrice:function(){
                     //     return this.totalPrice;
                     // }
                     totalPrice(){//蜜糖语法
                         return this.price;
                     }
                 }
             });
         </script>

</body>
</html>